<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='组数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/basic/groupInfo.js?v=3}"></script>
<body>
<div id="app" v-cloak>
  <el-container>
	<el-header height="45px" class="inner_header">
	    	<el-form ref="form" :model="queryData" label-width="80px" label-position="left">
		    	<el-row :gutter="20">
				  <el-col :span="6">
				  		<el-form-item label="名称">
					  		<el-input  placeholder="请输入名称" v-model="queryData.name" size="mini" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="描述">
					  		<el-input placeholder="请输入描述" v-model="queryData.description" size="mini" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  	<el-form-item>
				  		<el-button type="primary" icon="el-icon-search" @click="search" size="mini">查询</el-button>
			  			<el-button size="mini" icon="el-icon-plus" @click="addItem">增加</el-button>
			  		</el-form-item>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main class="inner_main">
	    	<div>
	    	  <el-table  
	    	    ref="groupInfoDatagrid" 
	    	    :data="datagrid"
			    style="width: 100%;"
			    stripe
			    >
			    	<el-table-column type="index" label="序号" width="50"></el-table-column>
				    <el-table-column prop="name" label="组名" width="150" show-overflow-tooltip> </el-table-column>
				    <el-table-column prop="description" label="组描述" width="150" show-overflow-tooltip> </el-table-column>
			        <el-table-column label="操作">
				      <template slot-scope="scope">
				        <el-button type="primary" size="mini"  @click="editItem(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini"   @click="deleteItem(scope.row)">删除</el-button>
				        <el-button size="mini" type="warning"  @click="handleGroupUser(scope.$index, scope.row)">管理用户</el-button>
				        <el-button size="mini" type="warning"  @click="handleGroupRole(scope.$index, scope.row)">管理权限</el-button>
				      </template>
				    </el-table-column>
			  </el-table>
			</div>
			<div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" top="10vh" :close-on-click-modal="false" :show-close="false">
		  <el-form :model="addData" ref="dialogForm" >
	      	<el-form-item label="组名" prop="name" 
	      		:label-width="dialogConfig.formLabelWidth" :rules="[{ required: true, message: '请填写组名'}]">
		      <el-input v-model="addData.name" size="mini" auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="组描述" prop="description" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.description" size="mini" auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
		  </div>
	 </el-dialog>
	 
	 <!-- 给组赋权 -->
	 <el-dialog :visible.sync="dialogConfig.dialogRoleFormVisible" :top="10" :close-on-click-modal="false" :show-close="false">
		  <el-form :model="addRoleData" ref="dialogRoleForm" >
		    <el-form-item label="权限" prop="auth" 
	      		:label-width="dialogConfig.formLabelWidth">
		    	<el-tree :data="treeData" ref="tree" show-checkbox :props="defaultProps" node-key="id" :default-checked-keys="defaultCheckedKeys"></el-tree>
	      	</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeRoleDialog">取 消</el-button>
		    <el-button type="primary" @click="submitRoleForm('dialogRoleForm')">确 定</el-button>
		  </div>
	 </el-dialog>
</div>
</body>
</html>